<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./综合作业素材/css/style.css">
</head>
<style>
</style>

<body>

  <!-- 4. box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <!-- <li>
          <a href="#">
            <img src="./综合作业素材/images/course01.png" alt="">
            <h4>
              Think PHP 5.0 博客系统实战项目演练
            </h4>
            <div class="info">
              <span>高级</span> • <span>1125</span>人在学习
            </div>
          </a>
        </li> -->
        <script>
          let data = [{
              src: './综合作业素材/images/course01.png',
              title: 'Think PHP 5.0 博客系统实战项目演练',
              num: 1125
            },
            {
              src: './综合作业素材/images/course02.png',
              title: 'Android 网络动态图片加载实战',
              num: 357
            },
            {
              src: './综合作业素材/images/course03.png',
              title: 'Angular2 大前端商城实战项目演练',
              num: 22250
            },
            {
              src: './综合作业素材/images/course04.png',
              title: 'Android APP 实战项目演练',
              num: 389
            },
            {
              src: './综合作业素材/images/course05.png',
              title: 'UGUI 源码深度分析案例',
              num: 124
            },
            {
              src: './综合作业素材/images/course06.png',
              title: 'Kami2首页界面切换效果实战演练',
              num: 432
            },
            {
              src: './综合作业素材/images/course07.png',
              title: 'UNITY 从入门到精通实战案例',
              num: 888
            },
            {
              src: './综合作业素材/images/course08.png',
              title: 'Cocos 深度学习你不会错过的实战',
              num: 590
            },
          ];

          for (let i = 0; i < data.length; i++) {
            console.log(data[i].src);
            console.log(data[i].title);
            console.log(data[i].num);

            document.write(`
              <li>
                <a href="#">
                  <img src=${data[i].src} alt="" title="${data[i].title}">
                  <h4>
                    ${data[i].title}
                  </h4>
                  <div class="info">
                    <span>高级</span> • <span>${data[i].num}</span>人在学习
                  </div>
                </a>
              </li>
            `);
          }
        </script>
      </ul>
    </div>
  </div>


</body>

</html>